Radio 单选框

介绍

用于在多个备选项中选中单个状态。

用法

基本引入

import { FQRadio } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/radio.scss';

基础用法

<FQRadio>Radio</FQRadio>

不可用

<FQRadio disabled />
<FQRadio checked disabled />

Radio.Group 组

const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  {
    label: 'Apple',
    value: 'Apple',
    disabled: true,
    className: 'label-1',
    onChange: (val, e) => console.log(val, e),
  },
  {
    label: 'Pear',
    value: 'Pear',
    className: 'label-2',
    onChange: (val, e) => console.log(val, e),
  },
  {
    label: 'Orange',
    value: 'Orange',
    className: 'label-3',
    onChange: (val, e) => console.log(val, e),
  },
];

<FQRadio.Group options={plainOptions} />
<FQRadio.Group options={options} />

Radio.Group 垂直

const options = ['Apple', 'Pear', 'Orange'];

<FQRadio.Group style={{ display: 'flex', flexDirection: 'column', gap: 8 }} options={options} />

API

属性

参数	说明	类型	默认值	版本
checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false
disabled	是否禁用	boolean	false
onChange	变化时回调函数	function(val: boolean, e: RadioChangeEvent)	-

Radio.Group

参数	说明	类型	默认值	版本
defaultValue	默认选中的值	any	-
disabled	禁选所有子单选器	boolean	false
options	以配置形式设置子元素	string[] | number[] | Array<RadioOptionType>	-
value	用于设置当前选中的值	any	-
onChange	选项变化时的回调函数	function(checkedValue: any)	-

RadioOptionType

参数	说明	类型	默认值	版本
label	选项的 label	ReactNode	-
value	选项的值	any	-
style	选项的样式	React.CSSProperties	-
className	选项的类名	string	-
disabled	选项失效状态	boolean	false
onChange	选项变化时回调函数	function(val: boolean, e: RadioChangeEvent)	-